/**
* 基础菜单 商品管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>爱心单词本</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="margin: 10px 10px">
      <!--       搜索筛选 -->
      <el-form :inline="true" class="word-search">
        <el-form-item label="搜索：" style="font-family: 隶体;font-weight:bold;">
          <el-input prefix-icon="el-icon-search" style="width: 300px;" v-model="search" clearable placeholder="请输入单词"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="searchWord()">搜索</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="add()">添加</el-button>
        </el-form-item>
      </el-form>
      <!--       数据表格 -->
      <el-table :data="words" border style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="word" label="单词" width="180"></el-table-column>
        <el-table-column prop="partOfSpeech" label="词性" width="180"></el-table-column>
        <el-table-column prop="definition" label="释义"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit" circle @click="selectById(scope.row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteWord(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
      <!-- 编辑界面 -->
      <el-dialog :title="title" :visible.sync="editFormWord" width="30%" @click="closeDialog">
        <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
          <el-form-item label="单词" prop="word">
            <el-input size="small" v-model="editForm.word" auto-complete="off" placeholder="单词"></el-input>
          </el-form-item>
          <el-form-item label="词性" prop="partOfSpeech">
            <el-input size="small" v-model="editForm.partOfSpeech" auto-complete="off" placeholder="词性"></el-input>
          </el-form-item>
          <el-form-item label="释义" prop="definition">
            <el-input size="small" v-model="editForm.definition" auto-complete="off" placeholder="释义"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" class="title" @click="addLoveProduct()">保存</el-button>
        </div>
      </el-dialog>
    </el-card>

  </div>
</template>

<script>

import {roleDelete} from "../../api/userMG";
import Pagination from '../../components/Pagination';

export default {
  data() {
    return {
      editFormWord: false, //控制编辑页面显示与隐藏
      title: '新增/修改',
      // 单词对象
      editForm: {
        id: '',
        word: '',
        partOfSpeech: '',
        definition: ''
      },
      // rules表单验证
      rules: {
        word: [
          {required: true, message: '请输入单词', trigger: 'blur'}
        ],
        partOfSpeech: [
          {required: true, message: '请输入词性', trigger: 'blur'}
        ],
        definition: [
          {required: true, message: '请输入释义', trigger: 'blur'}
        ]
      },
      //单词列表查询
      words: [],
      search: "",
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      }
    }

  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {

  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //获取数据 查询
    async queryWords() {
      const request = {
        'page': {
          'current': this.pageparm.currentPage,
          'size': this.pageparm.pageSize
        },
        'query': {
          'id': '',
          'word': this.search,
          'partOfSpeech': '',
          'definition': ''
        }
      }
      this.$axios.post('vocabulary/page', request).then(res => {
        if (res.data.code == 20000) { //成功
          // this.$message.success(res.data.msg);
          this.words = res.data.data.records
          console.log(res)
          console.log(this.words)
          // 分页赋值
          this.pageparm.currentPage = res.data.data.current
          this.pageparm.pageSize = res.data.data.size
          this.pageparm.total = res.data.data.total
        } else { //失败
          this.$message.error(res.data.msg);
        }
      })
    },
    //删除单词
    deleteWord(id) {
      this.$confirm('删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        var res = await this.$axios.get("vocabulary/delete?id=" + id)
        if (res.data.code == 20000) {
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
        this.queryWords();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 编辑、增加页面保存方法
    addLoveProduct() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          //调用后端的添加数据的接口，进行添加即可
          const data = {
            id: this.editForm.id,
            word: this.editForm.word,
            partOfSpeech: this.editForm.partOfSpeech,
            definition: this.editForm.definition,
          }
          var url = '';
          if (this.title == '修改') {
            url = 'vocabulary/update'
          } else if (this.title == '新增') {
            url = 'vocabulary/create';
          }
          this.$axios.post(url, data).then(res => {
            if (res.data.code == 20000) {
              this.$message.success(res.data.msg);
              this.queryWords();
            } else {
              this.$message.error(res.data.msg);
            }
          })
        } else {
          this.$message.error("数据不合法，请检查！");
        }
        this.editForm = {}
        this.editFormWord = false;
      })
    },
    //根据id查询展示信息
    async selectById(id) {
      this.title = '修改'
      const request = {
        'page': {
          'current': 1,
          'size': 1
        },
        'query': {
          'id': id,
          'word': '',
          'partOfSpeech': '',
          'definition': ''
        }
      }
      this.$axios.post('vocabulary/page', request).then(res => {
        if (res.data.code == 20000) { //成功
          // this.$message.success(res.data.msg);
          this.editForm = res.data.data.records[0]
          this.editFormWord = true;
        } else { //失败
          this.$message.error(res.data.msg);
        }
      })
    },
    //添加打开弹框
    add() {
      this.title = '新增';
      this.editForm = {};
      this.editFormWord = true;
    },
    // 分页插件事件
    callFather(parm) {
      this.pageparm.currentPage = parm.currentPage
      this.pageparm.pageSize = parm.pageSize
      this.queryWords()
    },
    // 搜索事件
    searchWord() {
      this.pageparm.currentPage = 1
      this.queryWords();
    },
    //行颜色动态变化
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 == 1) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormWord = false
    }
  },
  //当前页码加载前执行的代码
  mounted() {
    this.queryWords()
  }
}
</script>

<style>
.word-search {
  margin-top: 13px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}


</style>


